<template>
	<view class="login register">
		<view class="login-title">天达健康</view>
		<view class="login-from-wrap">
			<van-cell-group class="login-from">
				<van-field
					type="number"
					clearable
					:border="false"
					@change="cPhone"
					use-button-slot
					placeholder="请输入您的手机号"
				></van-field>
				<van-field
					type="number"
					clearable
					:border="false"
					@change="cVerification"
					use-button-slot
					placeholder="请输入验证码"
					:error-message="error"
				>
					<view class="login-from-sms" @click="getSMS" slot="button">
						{{ timer.text }}
					</view>
				</van-field>
				<van-field
					type="password"
					clearable
					:border="false"
					@change="cPassword"
					placeholder="新密码"
					:error-message="error"
				></van-field>
				<van-field
					type="password"
					clearable
					:border="false"
					@change="cPassword2"
					placeholder="确认密码"
					:error-message="error"
				></van-field>
			</van-cell-group>
			<view :class="{ active: active }">
				<van-button
					size="large"
					custom-class="login-from-btn"
					:loading="loading"
					@click="onLogin"
				>
					修改
				</van-button>
			</view>
		</view>
	</view>
</template>

<script>
import * as reg from '../../../common/utils/reg.js';
export default {
	data() {
		return {
			loading: false,
			active: false,
			from: {
				phone: '',
				verification: '',
				password: '',
				password2: ''
			},
			verify: {
				phone: false,
				verification: false,
				password: false,
				password2: false
			},
			error: '',
			timer: {
				func: '',
				count: '',
				text: '获取验证码'
			} // 倒计时
		};
	},
	onLoad() {},
	methods: {
		getSMS() {
			if (!this.verify.phone) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			if (this.timer.count > 0) return false;
			uni.showToast({
				title: '发送成功',
				icon: 'none',
				duration: 2000
			});
			this.timer.count = 59;
			this.timer.func = setInterval(() => {
				this.timer.count--;
				this.timer.text = this.timer.count + 's';
				if (this.timer.count <= 0) {
					this.timer.text = '获取验证码';
					clearInterval(this.timer.func);
				}
			}, 1000);
		},
		onLogin() {
			if (this.active) {
				this.loading = true;
			} else {
				this.loading = false;
			}
		},
		goLogin() {
			uni.navigateTo({
				url: '/pages/user/login/index'
			});
		},
		cPhone(e) {
			this.verify.phone = reg.regPhone(e.detail).bool;
			if (this.verify.phone) this.from.phone = e.detail;
			this.ifVerif();
		},
		cVerification(e) {
			this.verify.verification = reg.regVerification(e.detail).bool;
			if (this.verify.verification) this.from.verification = e.detail;
			this.ifVerif();
		},
		cPassword(e) {
			this.verify.password = reg.regPassword(e.detail).bool;
			if (this.verify.password) this.from.password = e.detail;
			this.ifVerif();
		},
		cPassword2(e) {
			this.verify.password2 = reg.regPassword2(this.from.password, e.detail).bool;
			if (this.verify.password2) this.from.password2 = e.detail;
			this.ifVerif();
		},
		ifVerif() {
			const arr = Object.values(this.verify);
			const data = arr.indexOf(false) > -1;
			return data ? (this.active = false) : (this.active = true);
		}
	}
};
</script>

<style scoped lang="scss">
.register {
	padding-bottom: 130upx;
	.login-from-wrap {
		margin: 90upx 50upx 0 50upx;
	}
}
.login {
	&-title {
		padding-top: 6vh;
		font-size: 40upx;
		font-weight: 700;
		text-align: center;
	}
	&-from {
		margin: auto;
		&-wrap {
			margin: 120upx 50upx 0 50upx;
		}
		.van-button::before {
			content: ' ';
			border-color: #e6e6e6;
			background-color: #e6e6e6;
		}
	}
	&-jump {
		display: flex;
		justify-content: space-between;
		margin: 40upx 10upx 0 10upx;
		color: #0079f3;
		font-size: 26upx;
		line-height: 1;
	}
}
</style>
